<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物视频控制台</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/fonts.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/fontawesome.min.css') }}">
    <script src="{{ url_for('static', filename='js/tailwind.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/auth.js') }}"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B35',
                        secondary: '#FFB800'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            min-height: 1024px;
            background-color: #F8F9FA;
        }
        .glass-effect {
            backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.8);
        }
        .video-card:hover {
            transform: translateY(-4px);
            transition: all 0.3s ease;
        }
        .chart-container {
            width: 100%;
            height: 300px;
        }
    </style>
</head>
<body class="bg-gray-50">
    <nav class="fixed top-0 left-0 right-0 z-50 glass-effect border-b border-gray-200">
        <div class="max-w-[1440px] mx-auto px-8 h-16 flex items-center justify-between">
            <div class="flex items-center gap-8">
                <a href="#" class="text-2xl font-['Pacifico'] text-primary">logo</a>
                <div class="relative">
                    <form action="/search" method="GET" class="flex">
                        <input type="text" name="q" placeholder="搜索视频、直播或设备" 
                               class="w-[400px] h-10 pl-10 pr-4 rounded-full bg-gray-100 border-none focus:outline-none focus:ring-2 focus:ring-primary/20 text-sm">
                        <button type="submit" class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
                            <i class="fas fa-search"></i>
                        </button>
                    </form>
                </div>
            </div>
            <div class="flex items-center gap-6">
                {% if user %}
                    <a href="/devices" class="flex items-center gap-2 text-gray-600 hover:text-primary !rounded-button">
                        <i class="fas fa-tv text-lg"></i>
                        <span class="whitespace-nowrap">我的设备</span>
                    </a>
                {% endif %}
                {% if user %}
                    <a href="/messages" class="flex items-center gap-2 text-gray-600 hover:text-primary !rounded-button">
                        <i class="fas fa-bell text-lg"></i>
                        <span class="whitespace-nowrap">消息</span>
                        {% if unread_count > 0 %}
                            <span class="bg-red-500 text-white text-xs rounded-full px-2 py-1">{{ unread_count }}</span>
                        {% endif %}
                    </a>
                {% endif %}
                {% if user %}
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
                            <i class="fas fa-user text-primary"></i>
                        </div>
                        <span class="text-sm text-gray-700">{{ user.username }}</span>
                        <button onclick="logout()" class="text-gray-500 hover:text-primary text-sm">
                            <i class="fas fa-sign-out-alt"></i>
                        </button>
                    </div>
                {% else %}
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
                            <i class="fas fa-user text-gray-600"></i>
                        </div>
                        <a href="/login" class="text-gray-600 hover:text-primary text-sm">登录</a>
                        <a href="/register" class="text-gray-600 hover:text-primary text-sm">注册</a>
                    </div>
                {% endif %}
            </div>
        </div>
    </nav>

    <main class="max-w-[1440px] mx-auto pt-24 px-8">
        <section class="relative h-[500px] rounded-2xl overflow-hidden mb-12">
            <img src="{{ url_for('static', filename='images/hero-banner.jpg') }}" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-r from-white/90 to-transparent">
                <div class="max-w-[600px] p-16 pt-24">
                    <h1 class="text-4xl font-bold mb-6">让宠物的独处时光更有趣</h1>
                    <p class="text-gray-600 mb-8 text-lg">专为宠物设计的智能视频系统，让您的毛孩子在家也能享受精彩内容。支持远程控制、智能推荐、互动游戏等功能。</p>
                    <div class="flex gap-4">
                        <a href="/devices" class="px-8 py-3 bg-primary text-white font-medium !rounded-button hover:bg-primary/90 inline-flex items-center justify-center">
                            立即体验
                        </a>
                        <a href="http://39.96.174.229:8080/app.apk" class="px-8 py-3 bg-white text-primary font-medium !rounded-button border border-primary hover:bg-primary/5" target="_blank">
                            客户端下载
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <section class="mb-12">
            <div class="flex items-center justify-between mb-8">
                <h2 class="text-2xl font-bold">精选分类</h2>
                <a href="/videos" class="text-primary hover:text-primary/80 !rounded-button">查看全部</a>
            </div>
            <div class="grid grid-cols-4 gap-6">
                {% for cat in categories %}
                <a href="/videos?category={{ cat.value }}" class="block">
                    <div class="relative h-[200px] rounded-xl overflow-hidden group cursor-pointer">
                        <img src="{{ cat.img }}" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-black/30 group-hover:bg-black/40 flex items-center justify-center">
                            <span class="text-white text-xl font-medium">{{ cat.name }}</span>
                        </div>
                    </div>
                </a>
                {% endfor %}
            </div>
        </section>

        <section class="mb-12">
            <div class="flex items-center justify-between mb-8">
                <h2 class="text-2xl font-bold">热门推荐</h2>
                <div class="flex gap-4">
                    <button class="px-4 py-2 bg-gray-100 text-gray-600 !rounded-button hover:bg-gray-200">最新</button>
                    <button class="px-4 py-2 bg-gray-100 text-gray-600 !rounded-button hover:bg-gray-200">最热</button>
                    <button class="px-4 py-2 bg-primary text-white !rounded-button">为你推荐</button>
                </div>
            </div>
            <div class="grid grid-cols-4 gap-6">
                {% for v in videos %}
                <a href="/video/{{ v[0] }}" class="block">
                    <div class="video-card bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md">
                        <div class="relative h-[180px]">
                            <img src="{{ v[3] }}" class="w-full h-full object-cover">
                            <span class="absolute bottom-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded">{{ v[4] }}</span>
                        </div>
                        <div class="p-4">
                            <h3 class="font-medium mb-2 line-clamp-2">{{ v[1] }}</h3>
                            <div class="flex items-center justify-between text-sm text-gray-500">
                                <span>播放 {{ '%.1f万' % (v[5]/10000) if v[5] >= 10000 else v[5] }}</span>
                                <div class="flex items-center gap-2">
                                    <i class="fas fa-heart text-primary"></i>
                                    <span>{{ '%.1fk' % (v[6]/1000) if v[6] >= 1000 else v[6] }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
                {% endfor %}
            </div>
        </section>

        <section class="mb-12">
            <div class="flex items-center justify-between mb-8">
                <h2 class="text-2xl font-bold">数据统计</h2>
                <div class="flex gap-4">
                    <button class="px-4 py-2 bg-primary text-white !rounded-button">今日</button>
                    <button class="px-4 py-2 bg-gray-100 text-gray-600 !rounded-button hover:bg-gray-200">本周</button>
                    <button class="px-4 py-2 bg-gray-100 text-gray-600 !rounded-button hover:bg-gray-200">本月</button>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-6">
                <div class="bg-white p-6 rounded-xl">
                    <h3 class="text-lg font-medium mb-4">观看时长分布</h3>
                    <div id="watchTimeChart" class="chart-container"></div>
                </div>
                <div class="bg-white p-6 rounded-xl">
                    <h3 class="text-lg font-medium mb-4">宠物类型偏好</h3>
                    <div id="petTypeChart" class="chart-container"></div>
                </div>
            </div>
        </section>

        <section class="mb-12">
            <div class="flex items-center justify-between mb-8">
                <h2 class="text-2xl font-bold">智能推荐</h2>
                <div class="flex gap-4">
                    <button class="px-4 py-2 bg-primary text-white !rounded-button">猫咪</button>
                    <button class="px-4 py-2 bg-gray-100 text-gray-600 !rounded-button hover:bg-gray-200">狗狗</button>
                    <button class="px-4 py-2 bg-gray-100 text-gray-600 !rounded-button hover:bg-gray-200">小宠物</button>
                </div>
            </div>
            <div class="grid grid-cols-6 gap-4">
                <div class="col-span-2 bg-white p-6 rounded-xl">
                    <h3 class="text-lg font-medium mb-4">今日推荐</h3>
                    <div class="space-y-4">
                        {% for rec in recommendations %}
                        <div class="flex gap-4">
                            <img src="{{ rec[2] }}" class="w-[120px] h-[80px] rounded-lg object-cover">
                            <div>
                                <h4 class="font-medium mb-1 line-clamp-2">{{ rec[1] }}</h4>
                                <p class="text-sm text-gray-500">推荐指数：{{ rec[3] }}%</p>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="col-span-4 grid grid-cols-3 gap-4">
                    {% for v in videos[:3] %}
                    <div class="video-card bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md">
                        <div class="relative h-[160px]">
                            <img src="{{ v[3] }}" class="w-full h-full object-cover">
                            <span class="absolute bottom-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded">{{ v[4] }}</span>
                        </div>
                        <div class="p-4">
                            <h3 class="font-medium mb-2 line-clamp-2">{{ v[1] }}</h3>
                            <div class="flex items-center justify-between text-sm text-gray-500">
                                <span>播放 {{ '%.1f万' % (v[5]/10000) if v[5] >= 10000 else v[5] }}</span>
                                <div class="flex items-center gap-2">
                                    <i class="fas fa-heart text-primary"></i>
                                    <span>{{ '%.1fk' % (v[6]/1000) if v[6] >= 1000 else v[6] }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </section>
    </main>

    <footer class="bg-white border-t border-gray-200 mt-12">
        <div class="max-w-[1440px] mx-auto px-8 py-12">
            <div class="grid grid-cols-4 gap-8 mb-8">
                <div>
                    <h3 class="text-xl font-['Pacifico'] text-primary mb-4">logo</h3>
                    <p class="text-gray-500 text-sm">让宠物的生活更有趣，让主人更放心。我们致力于为您的宠物提供最优质的视听体验。</p>
                </div>
                <div>
                    <h4 class="font-medium mb-4">快速链接</h4>
                    <ul class="space-y-2 text-sm text-gray-500">
                        <li><a href="/" class="hover:text-primary">首页</a></li>
                        <li><a href="/videos" class="hover:text-primary">视频库</a></li>
                        <li><a href="#" class="hover:text-primary">直播频道</a></li>
                        <li><a href="/devices" class="hover:text-primary">设备管理</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-medium mb-4">帮助中心</h4>
                    <ul class="space-y-2 text-sm text-gray-500">
                        <li><a href="#" class="hover:text-primary">使用指南</a></li>
                        <li><a href="#" class="hover:text-primary">常见问题</a></li>
                        <li><a href="#" class="hover:text-primary">联系我们</a></li>
                        <li><a href="#" class="hover:text-primary">意见反馈</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-medium mb-4">关注我们</h4>
                    <div class="flex gap-4">
                        <a href="#" class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-primary hover:text-white">
                            <i class="fab fa-weixin"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-primary hover:text-white">
                            <i class="fab fa-weibo"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-primary hover:text-white">
                            <i class="fab fa-wechat"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 初始化认证管理器
        const auth = new JWTAuth();
        
        // 登出函数
        async function logout() {
            await auth.logout();
        }
        
        // 渲染Echarts图表
        document.addEventListener('DOMContentLoaded', function() {
            var watchTimeChart = echarts.init(document.getElementById('watchTimeChart'));
            var petTypeChart = echarts.init(document.getElementById('petTypeChart'));
            watchTimeChart.setOption({
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: {{ watch_time_data.keys()|list|tojson }}
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: {{ watch_time_data.values()|list|tojson }},
                    type: 'bar',
                    itemStyle: { color: '#FF6B35' }
                }]
            });
            petTypeChart.setOption({
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: {{ pet_type_data.keys()|list|tojson }}
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: {{ pet_type_data.values()|list|tojson }},
                    type: 'bar',
                    itemStyle: { color: '#FFB800' }
                }]
            });
        });
    </script>
</body>
</html> 